<template>
	<view class="home">
		<view class="header">
			<view class="status_bar">
				<!-- 这里是状态栏 -->
			</view>
			<view class="title" :style="{ top: globalData.statusBarHeight + 'px', height: globalData.toBar + 'px', lineHeight: globalData.toBar + 'px' }">酷学单词对对碰</view>
		</view>
		<view class="timer">
			<view class="timer-top">
				<view class="text">今日学习</view>

				<view class="time">{{ studyTime || 0 }}分钟</view>
			</view>
			<progress class="progress" :percent="studyTime ? studyTime : 0" stroke-width="10" border-radius="30" />
		</view>
		<view class="content">
			<view class="activity" @click="goWordbreak">
				<image src="https://manage.aikoolearn.com/video-api/profile/upload/common/WXAPP/img/bgi.png" mode=""></image>
				<image
					src="https://manage.aikoolearn.com/video-api/profile/upload/common/WXAPP/img/go.png"
					mode=""
					class="active-btn"
					style="width: 162.214rpx; height: 158.397rpx"
				></image>
			</view>

			<view class="practice">
				<view class="practice-title">日常练习</view>
				<view class="activity-three" @click="goPages">
					<p class="cards-title" style="margin-top: 0">单词消消乐</p>
					<p class="cards-p">选择同一卡片的正面与背面快速消除</p>
				</view>
				<view class="line-two">
					<view class="line-right" @click="goGame">
						<p class="cards-title">看图识词</p>
						<p class="cards-p">大声跟读训练发音，强化发音技巧</p>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" background-color="#fff" :mask-click="false">
			<view class="popup-content">
				<view class="froms">
					<uni-forms :modelValue="from" :rules="rules" ref="form">
						<uni-forms-item required name="avatar">
							<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
								<image v-if="from.avatar" class="avatar" :src="`https://www.aikoolearn.com/video-dev${from.avatar}`"></image>
								<view class="title-upload" v-else>点击上传头像</view>
							</button>
						</uni-forms-item>
						<uni-forms-item required label="昵称" name="nickName">
							<uni-easyinput v-model="from.nickName" type="nickname" placeholder="请输入昵称" @blur="getnickname" />
						</uni-forms-item>
						<uni-forms-item required label="真实姓名" name="realName">
							<uni-easyinput v-model="from.realName" placeholder="请输入真实姓名" />
						</uni-forms-item>

						<uni-forms-item label="手机号" name="phonenumber">
							<uni-easyinput type="number" v-model="from.phonenumber" placeholder="请输入手机号码" />
						</uni-forms-item>
						<uni-forms-item required name="province" label="省份">
							<zxz-uni-data-select v-model="from.province" filterable :localdata="provinceData"></zxz-uni-data-select>
						</uni-forms-item>
						<uni-forms-item required name="deptId" label="学校">
							<zxz-uni-data-select v-model="from.deptId" filterable :localdata="schcoolData"></zxz-uni-data-select>
						</uni-forms-item>
						<uni-forms-item required label="学号" name="studentId" v-if="isshow()">
							<uni-easyinput v-model="from.studentId" placeholder="请输入学号" />
						</uni-forms-item>
					</uni-forms>
					<button @click="submit" style="width: 300rpx; background-color: #05c7ac; color: #fff; height: 84rpx; line-height: 84rpx">保存</button>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog
				type="warn"
				cancelText="取消"
				confirmText="确认"
				title="注意"
				content="学校、学号绑定后将无法更改。请谨慎填写"
				@confirm="dialogConfirm"
				@close="dialogClose"
			></uni-popup-dialog>
		</uni-popup>
		<view class="loginbox" @click="" v-if="!isLogin">
			<view class="">
				<span>登录体验更多玩法</span>
				<span class="login-btn" @click="login">立即登录</span>
			</view>
		</view>
	</view>
</template>

<script>
import { getWechatLogin, getUser, getSchool, postUser, getUserDuration } from '@/services/login.js';
export default {
	data() {
		return {
			globalData: null,
			SessionKey: '',
			OpenId: '',
			msg: '请求失败',
			avatarUrl: null,
			isShowLogin: false,
			from: {},
			rules: {
				// 对name字段进行必填验证
				avatar: {
					rules: [
						{
							required: true,
							errorMessage: '请上传头像'
						}
					]
				},
				nickName: {
					rules: [
						{
							required: true,
							errorMessage: '请输入昵称'
						}
					]
				},
				studentId: {
					rules: [
						{
							required: true,
							errorMessage: '请输入学号'
						}
					]
				},
				realName: {
					rules: [
						{
							required: true,
							errorMessage: '请输入真实姓名'
						}
					]
				},
				deptId: {
					rules: [
						{
							required: true,
							errorMessage: '请绑定学校'
						}
					]
				},
				province: {
					rules: [
						{
							required: true,
							errorMessage: '请绑定省份'
						}
					]
				}
			},
			schcoolData: [
				{ value: 0, text: '篮球' },
				{ value: 1, text: '足球' },
				{ value: 2, text: '游泳' }
			],
			provinceData: [
				{ text: '河北省', value: '河北' },
				{ text: '山西省', value: '山西' },
				{ text: '辽宁省', value: '辽宁' },
				{ text: '吉林省', value: '吉林' },
				{ text: '黑龙江省', value: '黑龙江' },
				{ text: '江苏省', value: '江苏' },
				{ text: '浙江省', value: '浙江' },
				{ text: '安徽省', value: '安徽' },
				{ text: '福建省', value: '福建' },
				{ text: '江西省', value: '江西' },
				{ text: '山东省', value: '山东' },
				{ text: '河南省', value: '河南' },
				{ text: '湖北省', value: '湖北' },
				{ text: '湖南省', value: '湖南' },
				{ text: '广东省', value: '广东' },
				{ text: '海南省', value: '海南' },
				{ text: '四川省', value: '四川' },
				{ text: '贵州省', value: '贵州' },
				{ text: '云南省', value: '云南' },
				{ text: '陕西省', value: '陕西' },
				{ text: '甘肃省', value: '甘肃' },
				{ text: '青海省', value: '青海' },
				{ text: '台湾省', value: '台湾' },
				{ text: '内蒙古自治区', value: '内蒙古' },
				{ text: '广西壮族自治区', value: '广西' },
				{ text: '西藏自治区', value: '西藏' },
				{ text: '宁夏回族自治区', value: '宁夏' },
				{ text: '新疆维吾尔自治区', value: '新疆' },
				{ text: '北京市', value: '北京' },
				{ text: '天津市', value: '天津' },
				{ text: '上海市', value: '上海' },
				{ text: '重庆市', value: '重庆' },
				{ text: '香港特别行政区', value: '香港' },
				{ text: '澳门特别行政区', value: '澳门' }
			],
			isLogin: false,
			studyTime: 0
		};
	},
	onShow() {
		this.getUserDurationDtat();
		let res = wx.getStorageSync('isLogin');
		if (res) {
			this.isLogin = true;
			this.getUserInfoData();
		} else {
			this.isLogin = false;
		}
		this.getSchoolData();
		this.globalData = wx.getStorageSync('globalData');
	},
	computed: {
		userInfo() {
			return wx.getStorageSync('isLogin');
		}
	},
	methods: {
		dialogConfirm() {
			this.dialogClose();
			this.postUserData();
		},
		dialogClose() {
			this.$refs.alertDialog.close();
		},
		goGame() {
			wx.showToast({
				title: '功能暂未开放，敬请期待！',
				icon: 'none',
				duration: 2000
			});
			// uni.navigateTo({
			// 	url: '/pages/pictureWords/index'
			// });
		},
		async getUserDurationDtat() {
			const res = await getUserDuration();
			if (res.code == 200) {
				this.studyTime = res.data.duration;
			}
		},
		isshow() {
			let school = this.schcoolData.filter((item) => item.value === this.from.deptId || '');

			if (school.length > 0 && school[0].text.includes('图书馆')) {
				return false;
			} else {
				return true;
			}
		},
		async postUserData() {
			console.log(this.from, 'from提交的from');
			const res = await postUser(this.from);
			console.log(res, 'res');
			if (res.code == 200) {
				this.$refs.popup.close();
				wx.removeStorageSync('userInfo');
				this.getUserInfoData();
			} else {
				wx.showToast({
					title: res.msg,
					icon: 'none',
					duration: 2000
				});
			}
		},
		submit() {
			this.$refs.form
				.validate()
				.then((res) => {
					this.$refs.alertDialog.open();
				})
				.catch((err) => {});
		},
		getnickname(e) {
			this.$set(this.from, 'nickname', e.detail.value);
		},
		goWordbreak() {
			if (this.isLogin) {
				uni.navigateTo({
					url: '/pages/wordbreak/index'
				});
			} else {
				wx.showToast({
					title: '请先登录',
					icon: 'none',
					duration: 2000
				});
			}
		},
		onChooseAvatar(e) {
			const { avatarUrl } = e.detail;
			let that = this;
			uni.uploadFile({
				//请求的url接口地址
				url: 'https://mobile.aikoolearn.com/video-dev' + '/common/upload', //真实的接口地址

				fileType: 'image', //图片类型
				filePath: avatarUrl, //哪张图片
				name: 'file', //对应接口的文件名称
				header: {
					//请求头
					Authorization: wx.getStorageSync('Authorization')
				},
				success: (res) => {
					console.log(res, '上传后的结果');
					console.log(res, '上传后的结果');
					let file = res.data;
					file = JSON.parse(file);
					this.$set(this.from, 'avatar', file.fileName);
				},
				fail: (err) => {
					//上传图片失败失败的回调
					console.log(err);
				}
			});
		},
		async getSchoolData() {
			const res = await getSchool();
			if (res.code == 200) {
				this.schcoolData = res.data.map((item) => ({
					value: item.deptId,
					text: item.deptName
				}));

				console.log(this.schcoolData, 'ddd');
			} else {
				wx.showToast({
					title: res.msg,
					icon: 'none',
					duration: 2000
				});
			}
		},
		goPages() {
			if (this.isLogin) {
				uni.navigateTo({
					url: '/pages/switchbooks/index'
				});
			} else {
				wx.showToast({
					title: '请先登录',
					icon: 'none',
					duration: 2000
				});
			}
		},
		login() {
			wx.login({
				provider: 'weixin',
				success: async (loginRes) => {
					console.log(loginRes, 'loginres');
					let code = loginRes.code;
					this.getCode(code);
				}
			});
		},
		async getCode(code) {
			const res = await getWechatLogin(code);

			if (res.code == 200) {
				this.isLogin = true;
				wx.setStorageSync('isLogin', true);
				wx.setStorageSync('Authorization', res.token);
				wx.showToast({
					title: '登录成功',
					icon: 'none',
					duration: 2000
				});
				this.getUserInfoData();
			} else {
				//登录失败
				wx.showToast({
					title: res.msg,
					icon: 'none',
					duration: 2000
				});
			}
		},
		async getUserInfoData() {
			const res = await getUser();

			console.log(res, 'userinfo');
			if (res.code == 200) {
				wx.setStorageSync('userInfo', res.data);
			} else if (res.code == 401) {
				this.from = { nickName: res.data.nickName };
				this.$refs.popup.open();
			} else {
				wx.showToast({
					title: res.msg,
					icon: 'none',
					duration: 2000
				});
			}
		}
	}
};
</script>

<style scoped lang="scss">
.home {
	position: relative;
	height: 100vh;
}

.header {
	width: 100%;
	height: 300rpx;
	background: linear-gradient(270deg, #05d19a 0%, #05c7ac 100%);

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
	.title {
		position: absolute;
		/* margin-top: 64rpx; */
		left: 50%;
		/* top: 20px; */
		transform: translate(-50%, 0);
		color: white;
		font-size: 32rpx;
	}
}

.timer {
	width: 702rpx;
	box-sizing: border-box;
	height: 148rpx;
	z-index: 88;
	padding: 40rpx 24rpx 34rpx 24rpx;
	position: absolute;
	transform: translate(4%, -50%);
	background-color: #fff;
	top: 265rpx;
	box-shadow: 0rpx 8rpx 24rpx 0rpx rgba(228, 228, 230, 0.5);
	border-radius: 24rpx;
	.timer-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 24rpx;
		.text {
			color: #999999;
			font-size: 24rpx;
		}
		.time {
			color: #08a792;
			font-size: 32rpx;
		}
	}
}
@keyframes scaleAnimation {
	0% {
		transform: scale(1); /* 初始状态，大小不变 */
	}
	50% {
		transform: scale(1.1); /* 中间状态，放大到1.2倍 */
	}
	100% {
		transform: scale(1); /* 结束状态，大小恢复 */
	}
}
.active-btn {
	width: 162.214rpx;
	height: 166.031rpx;
	position: absolute;
	animation: scaleAnimation 2s infinite ease-in-out;
	right: 62.977rpx;
	top: 57.252rpx;
}
.content {
	position: absolute;
	top: 235rpx;
	width: 100%;
	height: calc(100vh - 235rpx);
	border-radius: 40px 40px 0 0;
	background-color: #f0f2f5;
	.activity {
		width: 702rpx;
		height: 300rpx;
		border-radius: 19.084rpx;
		margin: 0 auto;
		margin-top: 148rpx;
		position: relative;

		image {
			width: 100%;
			height: 100%;
		}
	}
	.practice {
		width: 702rpx;
		height: 568rpx;
		box-sizing: border-box;
		padding: 24rpx;
		margin: 40rpx auto;
		border-radius: 24rpx;
		background-color: #fff;
		.practice-title {
			font-size: 32.443rpx;
			font-weight: 600;
		}
		.activity-three {
			width: 654rpx;
			height: 214rpx;
			margin-top: 24rpx;
			display: flex;
			justify-content: center;
			flex-direction: column;
			background-image: url('https://manage.aikoolearn.com/video-api/profile/upload/common/WXAPP/img/activity-three.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.line-two {
			margin-top: 18rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.line-right {
				width: 654rpx;
				height: 214rpx;

				background-image: url('https://manage.aikoolearn.com/video-api/profile/upload/common/WXAPP/img/activity-two.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
		}
		.cards-p {
			font-size: 24rpx;
			margin-left: 32rpx;
			margin-top: 16rpx;
			color: #666666;
		}
		.cards-title {
			font-size: 32rpx;
			margin-left: 32rpx;
			margin-top: 40rpx;
		}
	}
}

.loginbox {
	width: 100%;
	height: 70rpx;
	line-height: 70rpx;
	background-color: rgba(31, 31, 31, 0.4);
	z-index: 888;
	font-size: 26rpx;
	padding: 10rpx;
	position: absolute;
	bottom: 0;
	color: #fff;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	justify-content: space-between;
	.login-btn {
		margin-left: 20rpx;
		font-size: 24rpx;
		padding: 10rpx;
		border-radius: 7.634rpx;
		background: linear-gradient(270deg, #05d19a 0%, #05c7ac 100%);
	}
}

.froms {
	width: 650rpx;
	padding: 40rpx;
	box-sizing: border-box;
	.avatar-wrapper {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 40rpx;
		padding: 0 !important;
		image {
			width: 100%;
			height: 100%;
		}
	}
}

.popup-content {
	padding: 20rpx;
}
.weui-input {
	border: 1px solid #e5e5e5;
	padding: 10rpx 5rpx;
	input::placeholder {
		padding-left: 20rpx;
		color: #6a6a6a;
		font-size: 14px;
	}
}

.title-upload {
	line-height: 200rpx;
	text-align: center;
	color: #c6c1c1;
	font-size: 25rpx;
}

::v-deep {
	.progress {
		border-radius: 8rpx;
	}
	.uni-forms-item {
		align-items: center;
	}
	.is-required {
		display: none;
	}
}
</style>